<template>
	<view>{{ elapsedTimeText }}</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		onUnmounted
	} from 'vue';

	const props = defineProps({
		startTime: {
			type: Date,
			required: true,
		},
	});

	const elapsedTimeText = ref('');
	let intervalId;

	const updateElapsedTime = () => {
		const now = new Date().getTime();
		const start = props.startTime.getTime();
		const diff = now - start;

		const hours = Math.floor(diff / (1000 * 60 * 60));
		const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60));
		const seconds = Math.floor((diff % (1000 * 60)) / 1000);

		if (hours > 0) {
			elapsedTimeText.value = `${hours} 小时 ${minutes} 分 ${seconds} 秒`;
		} else if (minutes > 0) {
			elapsedTimeText.value = `${minutes} 分 ${seconds} 秒`;
		} else {
			elapsedTimeText.value = `${seconds} 秒`;
		}
	};

	onMounted(() => {
		updateElapsedTime();
		intervalId = setInterval(updateElapsedTime, 1000);
	});

	onUnmounted(() => {
		clearInterval(intervalId);
	});
</script>

<style scoped></style>